<script>
import collection from "../collection.vue"
import common from "../common"
import correctionIcon from "../../assets/correction.png"
import paperIcon from "../../assets/paper.png"
import successIcon from "../../assets/success.png"
import settingIcon from "../../assets/setting.png"
import setting from "../setting.vue"
export default {
  name: "controlBar",
  components: { collection, setting },
  data() {
    return {
      common,
      details: null,
      correctionIcon,
      paperIcon,
      successIcon,
      settingIcon,
    }
  },
  props: {
    viewAnalysis: {
      type: Boolean,
      required: true,
    },
  },
  created() {
    this.details = this.root.details
  },
  inject: ["root"],
  emits: ["openAnswerSheet", "submit"],
}
</script>

<template>
  <view class="component">
    <!--			设置-->
    <view class="btn-item" @click="$refs.setting.open()">
      <image class="icon" :src="settingIcon"></image>
      <view class="text">设置</view>
    </view>
    <setting ref="setting"></setting>
    <!--		收藏-->
    <view class="btn-item">
      <collection :structure-id="details.structureId" :is-collected-props="details.existFavorite"></collection>
    </view>
    <!--			纠错-->
    <view class="btn-item" @click="common.handleCorrectQuestion(details.structureId)">
      <image class="icon" :src="correctionIcon"></image>
      <view class="text">纠错</view>
    </view>
    <!--			答题卡-->
    <view class="btn-item" @click="$emit('openAnswerSheet')">
      <image class="icon" :src="paperIcon"></image>
      <view class="text">答题卡</view>
    </view>
    <!--			提交-->
    <view class="btn-item" @click="$emit('submit')" v-if="!viewAnalysis">
      <image class="icon" :src="successIcon"></image>
      <view class="text">完成作答</view>
    </view>
  </view>
</template>

<style scoped lang="scss">
.component {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100vw;
  height: calc(130rpx * var(--font-size-rate) + env(safe-area-inset-bottom));
  display: flex;
  justify-content: flex-end;
  background: white;
  padding-bottom: env(safe-area-inset-bottom);
  border-top: 2rpx solid var(--border-color);
  .btn-item {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    width: calc(20% * var(--font-size-rate));
    > .icon {
      width: calc(50rpx * var(--font-size-rate));
      height: calc(50rpx * var(--font-size-rate));
    }
    > .text {
      margin-top: calc(10rpx * var(--font-size-rate));
      font-size: calc(30rpx * var(--font-size-rate));
    }
  }
}
</style>
